<script setup lang="ts">
import { useThemeModeStore } from "@/store/themeMode"

const themeMode: any = useThemeModeStore()
</script>

<template>
<t-row class="container" :class="themeMode.isLight? 'light':'dark'">
  <div class="word">
    <p class="title">Author</p>
    <p>企业级授权系统</p>
  </div>


</t-row>
</template>

<style scoped lang="less">
.light{
  background-image: url("@/assets/images/banner-thumb.jpg");
}
.dark{
  background-image: url("@/assets/images/banner-thumb-dark.jpg");
}
.container{
  height: 500px;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: start;
  align-items: end;
  position: relative;

  .word{
    margin: 60px 50px;
    font-size: 40px;
    font-weight: bolder;
    .title{
      font-weight: bolder;
      color: #1c6ae4;
    }
  }
}
.container::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 设置模糊区域的高度 */
  background-image: inherit;
  background-size: cover;
  filter: blur(15px); /* 设置模糊效果的程度 */
}
</style>
